<template>
    <el-table 
    :data="userList"
     style="width: 100%"
     border
     >
    <el-table-column prop="user_id" label="id" />
    <el-table-column prop="username" label="账号" width="" />
    <el-table-column prop="password" label="密码" width="" />
    <el-table-column prop="" label="角色" width="" >
        <template #default="{row}">
            {{ getRoleName(row.role_id) }}
        </template>
    </el-table-column>

    <el-table-column prop="" label="操作" width="" >
        <template #default="{}">
           <el-button size="small" type="primary">修改</el-button>
           <el-popconfirm title="Are you sure to delete this?">
            <template #reference>
                <el-button size="small" type="danger">删除</el-button>
            </template>
        </el-popconfirm>
        </template>
    </el-table-column>
    </el-table>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { queryRole, queryUser } from '../../api/system';
interface UserItem{// 用户列表接口
    user_id:number
    role_id:number
    create_time:string
}

interface RoleItem{// 角色列表接口
    create_time:string
    role_id:number
    rolename:string
    description:string
}
type User=UserItem&UserInfo// 用户列表类型


const userList=ref<Array<User>>([])// 用户列表
const roleList=ref<Array<RoleItem>>([])// 角色列表
const getData=async ()=>{// 获取数据
   let userres:ResData=await queryUser() as ResData
   let roleres:ResData=await queryRole() as ResData
   if(userres.code==200){
    // let data:User[]=res.data as User[]
     userList.value=userres.data as User[]
     roleList.value=roleres.data as RoleItem[]
   }


}

const getRoleName=(role_id:number)=>{// 获取用户的角色名称
    return roleList.value.find(v=>v.role_id==role_id)?.rolename
}

onMounted(()=>{
    getData()
})
</script>
<style scoped >
</style>
